#chatsMainPanel {
	height: 100%;
	width: calc(100% - 13rem + 1px);
	flex-grow: 0;
	flex-shrink: 1;
	background-color: #fff;

	#chatMainComponent {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;

		.textChats {
			height: 100%;
			#chatMessages {
				width: 100%;
				height: 65%;
				background-color: whitesmoke;
				display: flex;
				flex-direction: column;
				overflow-y: auto;
				padding-bottom: 0.5rem;

				.dateDiv {
					width: 100%;
					text-align: center;
					font-size: 0.75rem;
					color: #3c3c3c;
					margin: 0%;
					padding: 0.125rem;
				}

				.chatMessageContainer {
					padding: 0.25rem;
					font-size: 1rem;
					display: flex;

					.chatMessageBubbles {
						padding-block: 0.25rem;
						padding-inline: 0.725rem;
						position: relative;
						margin-inline: 0.75rem;
						width: fit-content;
						max-width: 65%;
						border-radius: 0.5rem;
						word-break: break-word;

						img.emoji {
							height: 1.25rem;
							width: 1.25rem;
							cursor: text;
							-webkit-user-drag: none;
						}

						&::before {
							content: '';
							position: absolute;
							border: 0.5rem solid rgba($color: #000000, $alpha: 0);
							top: 0.5rem;
						}
					}

					&.chatMessageOthers {
						.chatMessageBubbles {
							background-color: #dcdcdc;

							&::before {
								border-right: 0.5rem solid #dcdcdc;
								left: -1rem;
							}
						}
					}

					&.chatMessageSelf {
						flex-direction: row-reverse;

						.chatMessageBubbles {
							background-color: #30beff;
							color: white;

							&::before {
								border-left: 0.5rem solid #30beff;
								right: -1rem;
							}
						}
					}
				}
			}

			#chatInput {
				width: 100%;
				height: 35%;

				.chatInputContentDiv {
					overflow-y: auto;
				}
			}

			&.onVideo {
				display: flex;
				height: 45%;
				width: 100%;

				#chatMessages {
					height: 100%;
					overflow-y: overlay;
					overflow-x: hidden;
					background-color: rgba($color: #000000, $alpha: 0.6);

					&::-webkit-scrollbar-track {
						background-color: #6f6f6f;
					}

					.moreMessagesButton {
						color: rgb(128, 213, 255);
						font-size: 0.9rem;
					}

					.dateDiv {
						font-size: 0.75rem;
						color: #dfdfdf;
					}

					.chatMessageContainer {
						width: 100%;
						padding: 0.25rem;
						font-size: 1rem;
						display: flex;

						&.chatMessageSelf,
						&.chatMessageOthers {
							flex-direction: row;
							.chatMessageBubbles {
								background: none;
								color: white;
								padding-block: 0;
								padding-inline: 0;
								margin-inline: 0.5em;
								max-width: 100%;
								border-radius: 0;
								word-break: break-all;
								font-size: 0.725rem;
								flex-grow: 1;

								img.emoji {
									height: 1em;
									width: 1em;
									transform: translateY(-0.125em);
								}

								&::before {
									display: none;
								}
							}

							.avatarTextDiv {
								font-size: 0.725rem;
								font-weight: bold;
								color: #fff;
								min-width: fit-content;

								&::after {
									content: ' :';
									cursor: text;
								}
							}
						}
					}
				}

				#chatInput {
					width: 100%;
					height: 100%;

					.chatInputContentDiv {
						overflow-y: overlay;
						font-size: 0.725rem;
					}
				}
			}
		}
	}
}
